import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Icon } from 'antd';
import { bindActionCreators } from 'redux';
import SearchList from './SearchList/SearchList';
import { CommonTable } from 'components';
import { blackListManageAction } from './index';
import styles from './BlackListManage.less';
import moment from 'moment';
const convertarams = (obj = {}) => {
    const { time = [], userPhone = '', userTrueName = '' } = obj;
    const isArr = Array.isArray(time) && time.length > 0;
    return {
        yStartTime: isArr ? time[0].format('YYYY-MM-DD 00:00:00') : '',
        yEndTime: isArr ? time[0].format('YYYY-MM-DD 23:59:59') : '',
        userPhone,
        userTrueName
    };
}

class BlackListManage extends Component{

    constructor(props) {
        super(props);
        this.state = {};
        this.pageSize = 10;
        this.searchParams = convertarams({});
        this.columns = [
            {
                title: '拉黑时间',
                dataIndex: 'addTime',
                key: 'addTime',
                render(text) {
                    return moment(Number(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            {
                title: '姓名',
                dataIndex: 'userTrueName',
                key: 'userTrueName'
            },
            {
                title: '手机号码',
                dataIndex: 'phoneNo',
                key: 'phoneNo'
            },
            {
                title: '身份证号',
                dataIndex: 'idcardNo',
                key: 'idcardNo'
            },
            {
                title: '备注',
                dataIndex: 'reason',
                key: 'reason',
                width: '40%',
                render(text) {
                    let str;
                    try {
                        str = JSON.parse(text);
                    } catch (e) {
                        str = text;
                    }

                    if (typeof str !== 'object') {
                        return str;
                    }
                    let arr = (str['risk_items'] || []).map(item => item['risk_name']);
                    return arr.join(',');
                }
            },
            {
                title: '操作人',
                dataIndex: 'operatorName',
                key: 'operatorName'
            }

        ];
    }
    componentDidMount() {
        const { getTableData } = this.props;
        getTableData({ pageSize: this.pageSize, pageNum: 1, ...this.searchParams });
    }

    componentWillUnmount() {
        const { setTableData } = this.props;
        setTableData({
            data: [],
            pagination: {}
        })
    }

    handleSearch = (obj) => {
        const { getTableData } = this.props;
        const params = convertarams(obj);
        getTableData({ pageSize: this.pageSize, pageNum: 1, ...params });
    }
    handlePageChange = (info) => {
        const { current, pageSize } = info;
        const { getTableData } = this.props;
        getTableData({ pageNum: current, pageSize, ...this.searchParams });
    }

    render() {
        const { tableData: { data, pagination }, loading } = this.props;
        return (
            <div>
                <SearchList submit={this.handleSearch}/>
                <CommonTable handlePageChange={this.handlePageChange} columns={this.columns} dataSource={data} pagination={pagination} loading={loading}/>
</div>
        );
    }
}
const mapStateToProps = (state) => {
    const { windControlCheckState: { blackListManageState } } = state;
    return {
        tableData: blackListManageState['data'],
        loading: blackListManageState['loading']
    }
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: blackListManageAction.blmGetTableData,
        setTableData: blackListManageAction.blmSetTableData
    },dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(BlackListManage);